<template>
    <!--最大的容器，包含左侧菜单和main，放在index组件里面的-->
    <div class="slider-bar">
        <el-container>

            <!--侧边导航栏-->
            <el-aside width="200px">
                <el-menu
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    :default-active="$store.state.activeMenu"
                    :unique-opened=true>
                    <sup-menu :menuList='menuList' ref="supMenu"></sup-menu>

                </el-menu>

            </el-aside>

            <!--主要区域-->
            <el-main>
                <!--组件渲染的地方-->
                <app-main ref="appmain"></app-main>
            </el-main>

        </el-container>
    </div>

</template>

<script>

    import SupMenu from './SupMenu.vue'
    import AppMain from './AppMain.vue'

    export default {
        name: "SliderBar",
        data() {
            return {
                isCollapse: false,
                menuList: [],
                // 当前被激活的那个页签，用户点击其他页签之后点击刷洗的情况之下需要处理
                firstChild:{}
            }
        },
        // 父组件传递过来的值
        props: [],
        created() {
            this.initMenu();
        },
        methods: {
            initMenu() {
                // 初始化菜单
                this.$axios.$PostJson({
                    url: "/menu",
                    data: {},
                }, result => {

                    var resultData = result.data;
                    // 传递到菜单组件进行渲染
                    this.menuList = resultData.dataList;
                    // 存全局
                    this.$store.state.menuList = this.menuList;
                    // 打开第一组菜单的第一个子菜单

                    if(this.$store.state.activeTagIndex != "" && this.$store.state.activeTagIndex !="0"){
                        // 之前有激活的，找到这个激活的
                        let menuId = this.$store.state.activeTagIndex.substring(this.$store.state.activeTagIndex.indexOf("-") + 1);
                        // 递归去找
                        this.getExistChild(this.menuList, menuId);
                    } else {
                        // 没有激活的。那么获取第一个
                        this.firstChild = this.getFirstChildMenu(this.menuList);
                    }
                    this.$refs.supMenu.openMain(this.firstChild.url, this.firstChild.name, this.firstChild.id, this.firstChild.path)

                }, error => {
                    this.$layer.showError("获取菜单异常", 3000, () => {
                    });
                })
            },
            // 获取第一个子菜单
            getFirstChildMenu(menuList){
                if(menuList != null ) {
                    // 获取第一个
                    let subMenu = menuList[0];
                    // 判断是否有子节点
                    if(subMenu.subMenu) {
                        return this.getFirstChildMenu(subMenu.subMenu);
                    } else {
                        // 如果是叶子节点，就直接调用这个了
                        return subMenu;
                    }
                }
            },
            getExistChild(menuList,menuId){
                if(menuList != null){
                    menuList.some(item=>{
                        // 判断是否有子节点
                        if(item.subMenu) {
                            return this.getExistChild(item.subMenu, menuId);
                        } else {
                            if(item.id == menuId){
                                this.firstChild = item;
                                return item;
                            }
                        }
                    });
                }
            },

            handleOpen(key, keyPath) {
                // 每次调用之前先清空
                console.log("打开");
            },
            handleClose(key, keyPath) {
                console.log("关闭");
            }
        },
        components: {
            "sup-menu": SupMenu,
            "app-main":AppMain
        }
    }
</script>

<style lang="scss" scoped>
    .slider-bar {
        height: 100%;
        position: relative;

        .el-container {
            height: 100%;
            background-color: #E9EEF3;
            .el-aside {
                /*margin-top: 5px;*/
                color: #333;
                text-align: center;
                height: 100%;
                overflow: auto;
                background-color: #f3f8fc;
                position: absolute;

                .el-menu-vertical-demo:not(.el-menu--collapse) {
                    width: 200px;
                    min-height: 100%;
                }
            }

            .el-main {
                color: #333;
                text-align: center;
                min-height: 100%;
                margin-left: 205px;
                padding: 0;
            }
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    }
</style>
